
html,body{
    width: 100%;
    height:100%;
    font-size:12px;
}
body{
    background: #323232;
    color:#cdcdcd;
}
.container {
	width: 98vw;
	margin: 1vw auto;
}
button{
    font-size: 12px;;
    padding:5px 10px;
    border-radius: 3px;
    border:1px solid #525252;
    color:#cdcdcd;
    background: #323232;
}
button:hover{
    background: #3e3e3e;
}
button:active{
    /* background: linear-gradient(#000, #333); */
    background: #1f1f1e;
}
.app h3{
    text-align:center;
    color:#cdcdcd;
    padding:20px 0;
}
.main{
    text-align: left;
    display: flex;
    height:100%;
    justify-content: center;
    align-items: center;
}
input{
    border:1px solid #3e3e3e;
    background:#2a2a2a;
    padding:3px;
}

.row, .artboards, .fit-options, .align-group, .option-group {
    clear: both;
    width: 96vw;
}
#artboardSize {
    margin: 10px 0;
    width: 90%;
  }

  /* ============== svg icon =========== */

.icon{
    padding: 2px;
  }
  
  .svg-icon, .opt-icon{
    width: 24px;
    height: 24px;
    margin: 6px;
    /* padding: 5px; */
    overflow: hidden;
    /* border-radius: 3px; */
    display: flex;
    float: left;
    justify-content: center;
    align-items: center;
  }
  
  .svg-icon path {
    fill: #cdcdcd;
  }
  .tip {
    position: absolute;
    visibility: hidden;
    top: 36px;
    color: #323232;
    background-color: #999;
    padding: 2px 5px;
    z-index: 1000;
    box-shadow: 0 0 3px black;
  }
  
  .svg-icon:hover, .opt-icon:hover{
    background: #3e3e3e;
    /* border-radius: 3px; */
    outline:1px solid #525252;
  
  }
  .active, .svg-icon:active, .opt-icon:active{
    /* background: linear-gradient(#000, #333); */
    background: #1f1f1e;
    /* border-radius: 3px; */
    outline:1px solid #525252;
  }
  
  li:hover .tip {
    visibility: visible;
  }
  
  button:hover{
    background: #3e3e3e;
  }
  
  button{
    font-size: 12px;;
    padding:5px 10px;
    border-radius: 3px;
    border:1px solid #525252;
    color:#cdcdcd;
    background: #323232;
  }
  
  button:active{
    /* background: linear-gradient(#000, #333); */
    background: #1f1f1e;
    border-radius: 3px;
    /* border:1px solid #525252; */
    outline: none;
    border: none;
  }
  
  input, textarea, [contenteditable]{
    border:1px solid #3e3e3e;
    background:#2a2a2a;
    padding:3px;
  }
  
  [contenteditable] {
    width: 100%;
  }
  [contenteditable] i{
    margin-right: 5px;
  }
  
  
  [contenteditable]:focus{
      outline: none;
  }